<template>
  <div>
    <div class="abslrtb flex-column a-center wrap">
      <div class="topbox flex-column aj-center">
        <image class="logoimg" src="/static/logo.png" mode=""></image>
      </div>
      <div class="flex tabs mb30">
        <div
          @click="tab(0)"
          class="flex-1 flex aj-center"
          :class="tabIndex == 0 && 'active'"
        >
          <text class="fs30 fw600 text-gray" :class="tabIndex == 0 && 'curtext'"
            >账号登录</text
          >
        </div>
        <div
          @click="tab(1)"
          class="flex-1 flex aj-center"
          :class="tabIndex == 1 && 'active'"
        >
          <text class="fs30 fw600 text-gray" :class="tabIndex == 1 && 'curtext'"
            >手机登录</text
          >
        </div>
      </div>
      <div class="form" v-if="tabIndex == 0">
        <div class="flex a-center form-item">
          <div class="label">
            <text>账号</text>
          </div>
          <image class="label_icon" src="/static/images/icon_user.png" mode=""></image>
          <div class="label_fgs"></div>
          <div class="flex-1">
            <input
              v-model="username"
              placeholder-class="placeholder"
              class="qui-input"
              type="text"
              value=""
              placeholder="请输入账号"
            />
          </div>
        </div>
        <div class="flex a-center form-item">
          <div class="label">
            <text>密码</text>
          </div>
          <image class="label_icon" src="/static/images/icon_pw.png" mode=""></image>
          <div class="label_fgs"></div>
          <div class="flex-1">
            <input
              v-model="password1"
              placeholder-class="placeholder"
              :password="password"
              class="qui-input"
              type="text"
              value=""
              placeholder="请输入密码"
            />
          </div>
        </div>
      </div>

      <div class="form" v-if="tabIndex == 1">
        <div class="flex a-center form-item">
          <div class="label">
            <text>手机号</text>
          </div>
          <image class="label_icon" src="/static/images/icon_phone.png" mode=""></image>
          <div class="label_fgs"></div>
          <div class="flex-1">
            <input
              placeholder-class="placeholder"
              class="qui-input"
              type="text"
              value=""
              placeholder="请输入手机号"
            />
          </div>
        </div>
        <div class="flex a-center form-item">
          <div class="label">
            <text>验证码</text>
          </div>
          <image class="label_icon" src="/static/images/icon_code.png" mode=""></image>
          <div class="label_fgs"></div>
          <div class="flex-1">
            <input
              placeholder-class="placeholder"
              :password="password"
              class="qui-input"
              type="text"
              value=""
              placeholder="请输入验证码"
            />
          </div>
          <div>
            <text style="opacity: 0.8" class="yzm fs28 ptb20 main-color">获取验证码</text>
          </div>
        </div>
      </div>
      <div class="btns">
        <div class="qbtn">
          <text class="btn-text-color fs30" @click="goto">登录</text>
        </div>
        <div class="flex ptb30 mlr20 space-between">
          <div @click="goRegister" class="">
            <text class="fs26 nav-text-color underline">注册</text>
          </div>
          <div class="" @click="goForget">
            <text class="fs26 nav-text-color underline">忘记密码</text>
          </div>
        </div>
      </div>

      <div
        class="otherLogin"
        style="
          position: fixed;
          display: flex;
          flex-direction: row;
          margin-top: 1300rpx;
          justify-content: center;
          flex: 4;
        "
      >
        <div @click="otherLogin('weixin')" style="margin: 50rpx">
          <u-icon name="weixin-circle-fill" size="40" color="#1fba1a"></u-icon>
        </div>
        <div @click="otherLogin('qq')" style="margin: 50rpx">
          <u-icon name="qq-circle-fill" size="40" color="#333"></u-icon>
        </div>
       
        <div @click="otherLogin('apple')" style="margin: 50rpx">
          <u-icon name="apple-fill" size="40" color="#333"></u-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "uni_1",
};
</script>

<style lang="scss" scoped></style>
